<template>
	<view>
		<!-- 根据平台选择地图容器 -->
		<view class="flex bg-white padding  justify-between fixed">
			<view>
				<text class="xl text-gray cuIcon-location"></text><text
					class="xl text-gray">{{order.locationAddress}}</text>
			</view>
			<view>
				<button class="cu-btn round bg-purple" @tap="navDialog = true">导航</button>
			</view>


		</view>
		<view class="map-container" id="amapContainer"></view>
		<view class="padding"></view>
		<view class="cu-modal bottom-modal" :class="navDialog== true?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white">
					<view class="action text-green"></view>
					<view class="action text-blue" @tap="navDialog = false">取消</view>
				</view>
				<view class="flex  justify-between">
					<view class="padding" @tap="gaodeNav">
						<view class='cu-avatar xl radius'
							style="background-image:url(static/map/gaode.png);background-color: inherit;">

						</view>
						<view class="margin-top-sm">高德地图</view>
					</view>
					<view class="padding" @tap="baiduNav">
						<view class='cu-avatar xl radius'
							style="background-image:url(static/map/baidu.png);background-color: inherit;">

						</view>
						<view class="margin-top-sm">百度地图</view>
					</view>
					<view class="padding" @tap="tengXunNav">
						<view class='cu-avatar xl radius'
							style="background-image:url(static/map/tengxun.png);background-color: inherit;">

						</view>
						<view class="margin-top-sm">腾讯地图</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navDialog: false,
				longitude: 116.397428, // 中心点经度
				latitude: 39.90923, // 中心点纬度
				zoom: 5, // 缩放级别
				order: {},
				cl: ""
			}
		},
		onLoad(options) {
			try {
				console.log(options.encodeData) // 输出: 张三
				// 解析 JSON 字符串为对象
				const order = JSON.parse(decodeURIComponent(options.encodeData))

				this.order = order;
			} catch (e) {
				console.error('解析参数失败', e)
			}

			this.initMap();
		},
		methods: {
			gaodeNav() {
				if (window.Android) {
					let order = this.order;
					const result = window.Android.openGaoDeMap(order.addressLatitude, order.addressLongitude, order
						.locationAddress)

					this.navDialog = false;
					if (!result) {
						uni.showToast({
							title: "未检测到高德地图",
							duration: 2000
						})
					}
				}
			},
			baiduNav() {
				if (window.Android) {
					let order = this.order;
					const result =
						window.Android.openBaiduMap(order.addressLatitude, order.addressLongitude, order.locationAddress);
					this.navDialog = false;
					if (!result) {
						uni.showToast({
							title: "未检测到百度地图",
							duration: 2000
						})
					}
				}
			},
			tengXunNav() {
				if (window.Android) {
					let order = this.order;
					const result = window.Android.openTengXunMap(order.addressLatitude, order.addressLongitude, order
						.locationAddress);
					this.navDialog = false;
					if (!result) {
						uni.showToast({
							title: "未检测到腾讯地图",
							duration: 2000
						})
					}
				}
			},
			initH5Map() {
				let _this = this;
				window._AMapSecurityConfig = {
					securityJsCode: "5677276f3ee4ad47798c772465987543",
				}

				let map;

				AMapLoader.load({ //首次调用 load
					key: '2973b2cb0963a1f1127d71f2461f75ba', //首次load key为必填
					version: '2.0',
					plugins: ['AMap.Scale', 'AMap.ToolBar']
				}).then((AMap) => {
					map = new AMap.Map('amapContainer', {
						viewMode: "2D",
						zoom: 11
					});
					map.addControl(new AMap.Scale())
					map.addControl(new AMap.ToolBar())
					if (_this.order && _this.order.orderId) {
						map.add(new AMap.Marker({
							position: [_this.order.addressLongitude, _this.order.addressLatitude]
						}));
					}



				}).catch((e) => {
					console.error(e);
				});

				if (window.Android) {
					let cl = window.Android.getCurrentLocation();
					this.cl = cl;
					//alert("0")
					if (this.cl) {
						//alert("1")
						let clObj = JSON.parse(this.cl);
						// clObj = {
						// 	"latitude": "30.7180772",
						// 	"positionDay": "20250712",
						// 	"longitude": "104.1139673",
						// 	"positionHour": "05"
						// }
						AMapLoader.load({
							plugins: ["AMap.Driving"]
						}).then((AMap) => {
							//alert("2")

							const driving = new AMap.Driving({
								map: map, // 要显示路线规划结果的地图实例
								policy: AMap.DrivingPolicy.LEAST_TIME // 驾车策略，可选最快路线、最少费用等
							});
							const start = new AMap.LngLat(clObj.longitude, clObj.latitude); // 起点经纬度
							const end = new AMap.LngLat(_this.order.addressLongitude, _this.order
							.addressLatitude); // 终点经纬度
							driving.search(start, end, function(status, result) {
								if (status === 'complete') {
									console.log('路线规划成功');
									// 可根据result中的数据进行进一步处理，如显示路线详情等
								} else {
									console.log('路线规划失败：' + result.info);
								}
							});

						}).catch((e) => {
							console.error(e);
						});



					}
				}



			},
			initMap() {
				let _this = this;
				// 动态加载高德JS API
				if (!window.AMapLoader) {
					const script = document.createElement('script')
					script.src = `https://webapi.amap.com/loader.js`
					script.onload = () => {
						_this.initH5Map()
					}
					document.body.appendChild(script)
				} else {
					_this.initH5Map()
				}

			}
		}
	}
</script>

<style>
	.map-container {
		width: 100%;
		height: calc(100vh - 300rpx);
	}
</style>